<template>
  <el-dialog
    v-el-drag-dialog="{ heightFixed: true, resize: resize, updataFull, updataDialogWidth }"
    :fullscreen="isfullscreen"
    :title="$t('LOCATION')"
    :visible="visible"
    @open="open"
    @close="close"
  >
    <gis-map
      v-if="nodeData"
      ref="gisMap"
      map-id="locateMap"
      :operate-type="operateType"
      show-type="regionLocate"
      :is-home="false"
      :nodes="[nodeData]"
      @located="located"
    />
    <template v-slot:footer>
      <template v-if="!isMod">
        <el-button @click="close">{{ $t('CLOSE') }}</el-button>
      </template>
      <template v-else>
        <el-button @click="close">{{ $t('CANCEL') }}</el-button>
        <el-button type="primary" @click="save">{{ $t('SAVE') }}</el-button>
      </template>
    </template>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { deepClone } from '@/utils/common'
  import gisMap from '@/views/module/home/components/gis'

  export default {
    components: { gisMap },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      operateType: {
        type: String,
        default: 'view'
      },
      isMod: {
        type: Boolean,
        default: true
      },
      data: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        nodeData: null,
        location: []
      }
    },
    computed: {
      ...mapGetters(['regionTree', 'stationSelected'])
    },
    methods: {
      open() {
        this.nodeData = deepClone(this.data)
        this.nodeData.nodeId = this.nodeData.regionId || 'newRegion'
        this.nodeData.label = this.nodeData.regionName
        if (!this.nodeData.latitude || !this.nodeData.longitude) {
          this.getRegionName()
        } else {
          this.renderMap()
        }
      },
      // 查询区域、站点名
      getRegionName() {
        const that = this
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            position => {
              // console.log(position.coords.longitude)
              // console.log(position.coords.latitude)
              that.nodeData.longitude = position.coords.longitude
              that.nodeData.latitude = position.coords.latitude
              that.renderMap()
            },
            err => {
              // throw();
              console.log(err.message)
              that.renderMap()
            }
          )
        } else {
          this.renderMap()
        }
        // return regionList.map(i => i.regionName).join('/')
      },
      located(data) {
        this.nodeData = {
          ...this.nodeData,
          ...data
        }
        console.log('this.data', this.data)
        this.renderMap()
      },
      resize() {
        this.$refs.gisMap.map.updateSize()
      },
      renderMap() {
        this.$store.commit('setStationSelected', [...this.stationSelected, this.nodeData.nodeId])
        this.$store.commit('setGisActived', {
          cableIds: [],
          nodeIds: [this.nodeData.nodeId],
          color: '',
          mapId: 'locateMap'
        })
        setTimeout(() => {
          this.$refs.gisMap && this.$refs.gisMap.formateData()
        })
      },
      save() {
        this.$refs.gisMap && this.$refs.gisMap.removeDraw()
        this.$emit('close', this.nodeData)
      },
      close() {
        this.$refs.gisMap && this.$refs.gisMap.removeDraw()
        this.$emit('close')
      }
    }
  }
</script>

<style scoped>
  .el-dialog__wrapper :deep(.el-dialog__body) {
    position: relative;
    padding: 0;
    height: 60vh;
  }
  .locate-btn {
    position: absolute;
    top: 0;
  }
</style>
